<%--
  Created by IntelliJ IDEA.
  User: lain
  Date: 2023/6/14
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Register</title>
    <link rel="stylesheet" type="text/css" href="static/css/base.css"/>
    <style lang="css">

      body {
        background-color: lightgray;
      }

      .container {
        position: absolute;
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .login-box {
        border-radius: 5px;
        border-width: 2px;
        background-color: white;
        width: 40vw;
        height: 50vh;
      }

      .back-button-area {
        margin-top: 5px;
        margin-left: 5px;
      }

      .title-group {
        margin-bottom: 0;
      }

      .input-box {
        margin-left: 10%;
        margin-top: 6%;
        width: 80%;
        height: 60%;
      }

      .input-group {
        margin-block: 15px;
        width: 100%;
      }

      .input-group input:focus {
        outline: 2px solid deepskyblue;
        box-shadow: 1px 1px 10px 1px aliceblue;
        transition: 1s;
      }

      .button-group {
        display: flex;
        margin-top: 30px;
      }

      .wrong-group {
        display: none;
        display: none;
      }
    </style>
    <script lang="JavaScript">
      const base_href = window.location.href.slice(0, window.location.href.lastIndexOf('/'))
      const backIndex = () => {
        window.location.href = base_href + '/'
      }
      const toLogin = () => {
        window.location.href = base_href + '/login.jsp'
      }
      const submitRegisterForm = () => {
        let allowSignUp = true
        document.getElementById("wrong-tip-0").setAttribute("style", "display: none")
        document.getElementById("wrong-tip-1").setAttribute("style", "display: none")
        document.getElementById("wrong-tip-2").setAttribute("style", "display: none")
        document.getElementById("wrong-tip-3").setAttribute("style", "display: none")
        // if (
        //         document.getElementById("username").value.length < 3 &&
        //         document.getElementById("password").value.length < 3 &&
        //         document.getElementById("nickname").value.length < 3) {
        //   document.getElementById("wrong-tip-1").setAttribute("style", "display: initial")
        //   document.getElementById("wrong-tip-1").setAttribute("style", "display: initial")
        //   document.getElementById("wrong-tip-2").setAttribute("style", "display: initial")
        // } else if (document.getElementById("username").value.length < 3) {
        //   document.getElementById("wrong-tip-1").setAttribute("style", "display: initial")
        // } else if (document.getElementById("password").value.length < 3) {
        //   document.getElementById("wrong-tip-2").setAttribute("style", "display: initial")
        // } else {
        //   if (document.getElementById("password").value != document.getElementById("confirm-password").value) {
        //     document.getElementById("wrong-tip-3").setAttribute("style", "display: initial")
        //   } else {
        //     document.getElementById("login-form").setAttribute("action", base_href + '/RegisterServlet')
        //     document.getElementById("login-form").submit()
        //   }
        // }
        if (document.getElementById("username").value.length < 3 || document.getElementById("username").value.length > 20) {
          document.getElementById("wrong-tip-1").setAttribute("style", "display: initial")
          allowSignUp = false
        }
        if (document.getElementById("nickname").value.length < 3 || document.getElementById("nickname").value.length > 20) {
          document.getElementById("wrong-tip-0").setAttribute("style", "display: initial")
          allowSignUp = false
        }
        if (document.getElementById("password").value.length < 3 || document.getElementById("nickname").value.length > 16) {
          document.getElementById("wrong-tip-2").setAttribute("style", "display: initial")
          allowSignUp = false
        }
        if (document.getElementById("password").value !== document.getElementById("confirm-password").value) {
          document.getElementById("wrong-tip-3").setAttribute("style", "display: initial")
          allowSignUp = false
        }

        if (allowSignUp) {
          document.getElementById("register-form").setAttribute("action", base_href + '/RegisterServlet')
          document.getElementById("register-form").submit()
        }
      }
    </script>
  </head>
  <body>
    <div class="container login-box">
      <div class="back-button-area">
        <div class="format-button" onclick="backIndex()">返回</div>
      </div>
      <div class="input-box">
        <div class="title-group">
          <h1> Register to Book Note Sys </h1>
        </div>
        <form method="post" id="register-form" style="height: auto;">
          <div class="input-group">
            <input class="format-input" name="nickname" placeholder="请输入用户昵称" id="nickname"/>
          </div>
          <div class="wrong-group" id="wrong-tip-0">
            <span style="color: red;">昵称不能小于3位</span>
          </div>
          <div class="input-group">
            <input class="format-input" name="username" placeholder="请输入用户名" id="username"/>
          </div>
          <div class="wrong-group" id="wrong-tip-1">
            <span style="color: red;">用户名不能小于3位</span>
          </div>
          <div class="input-group">
            <input type="password" class="format-input" name="password" placeholder="请输入密码" id="password"/>
          </div>
          <div class="wrong-group" id="wrong-tip-2">
            <span style="color: red;">密码不能小于3位</span>
          </div>
          <div class="input-group">
            <input type="password" class="format-input" name="password" placeholder="请确认密码" id="confirm-password"/>
          </div>
          <div class="wrong-group" id="wrong-tip-3">
            <span style="color: red;">两次密码不一致</span>
          </div>
        </form>
        <div class="button-group">
          <div class="format-button primary-button" style="margin-left: auto;" onclick="submitRegisterForm()">注册</div>
          <div class="format-button" style="margin-left: 5px;" onclick="toLogin()">登录</div>
        </div>
      </div>
    </div>
  </body>
</html>
